<template>
  <div class="LoginContiner">
    <!-- fules属性填写对应验证规则 -->
    <el-form class="LoginForm" :model="LoginForm" ref="LoginForm" :inline="false" size="normal" :rules="rules">
        <h2>系统登录</h2>
      <el-form-item label="" prop="UserName">
        <el-input v-model="LoginForm.UserName" placeholder="用户名" ></el-input>
      </el-form-item>
      <el-form-item label=""  prop="PassWord">
        <el-input v-model="LoginForm.PassWord" type="password" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item prop="Code">
        <el-row :gutter="20">
          <el-col :span="18" :offset="0">
            <el-input  v-model="LoginForm.Code" placeholder="输入验证码" ></el-input>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-input v-model="LoginForm.Code" placeholder="输入验证码"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="LoginSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      LoginForm: {
        UserName: "",
        PassWord: "",
        Code: "",
      },
      rules:{
          UserName: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          PassWord:[{
              required:true,
              trigger:'blur',
              message:'请输入密码'
          }],
          Code:[{
              required:true,
              trigger:'blur',
              message:'请输入验证码'
          }]
      }
    };
  },
  methods: {
    LoginSubmit() {
        console.log(this.$refs.LoginForm)
         this.$refs.LoginForm.validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        })
    },
  },
};
</script>

<style lang="scss" scoped>
.LoginContiner {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .LoginForm {
    width: 350px;
    height: 350px;
    border-radius: 10px;
    box-shadow: 0 0 25px #cac6c6;
    padding: 20px 35px;
  }
}
</style>